<template>
	<view class="phone">
		<!-- 提示 -->
		<text class="tishi">请输入 {{phone}} 收到的短信校验码</text>
		<view class="box">
			<view class="left">
				校验码
				<el-input v-model="xym" placeholder="请输入新手机号"></el-input>
			</view>
			<u-code ref="uCode" @change="codeChange1" seconds="20" changeText="X秒重新获取"></u-code>
			<u-button class='right' @tap="getCode" :text="tips" type="success" size="mini"></u-button>
			<!-- <text class="right" @click="getCode">
				获取验证码
				<view></view>
			</text> -->
		</view>
		<view class="btnBox">
			<el-button class='btn' @click="router('/pages/person/setUp/securityChild/complete')">下一步</el-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xym: '',
				phone: '',
				// 获取验证码
				yzm: '',
				tips: '',
				getCodeText: '获取验证码',
				getCodeisWaiting: false,
				
			};
		},
		onLoad: function({
			phone
		}) {
			this.phone = phone
		},
		methods: {
			router(path) {
				if(this.xym == this.yzm && this.xym !== '') {
					uni.navigateTo({
						url: `${path}?len=3`
					})
				} else {
					uni.showToast({
						title: '验证码错误',
						duration: 2000,
						icon: 'none'
					});
					return
				}
			},
			// 模拟短信验证码
			codeChange1(text) {
				this.tips = text;
			},
			setTimer() {
				let holdTime = 20; //定义变量并赋值
				this.getCodeText = "重新获取(20)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正获取验证码'
					})
					console.log(this.tips)
					if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) { //校验手机号码是否有误
						uni.showToast({
							title: '请填写正确手机号码',
							icon: "none"
						});
						return false;
					}
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖	
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
						this.yzm = parseInt(Math.random() * 10000)
						console.log(this.yzm)
						uni.showToast({
							title: `验证码为${this.yzm}`,
							icon: "none"
						});
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			}
		},
	}
</script>

<style lang="scss">
	/deep/ .el-input {
		width: 70%;
		box-sizing: border-box;
		vertical-align: middle;
	}

	/deep/ .el-input__inner {
		border: none;
		height: 100%;
	}

	.phone {
		width: 100vw;
		height: calc(100vh - 88upx);
		background: rgb(242, 243, 247);
		overflow: hidden;

		.tishi {
			display: block;
			box-sizing: border-box;
			padding: 30upx 40upx;
			font-size: 26upx;
			color: grey;
		}

		.box {
			width: 100%;
			box-sizing: border-box;
			padding: 30upx;
			background: white;
			display: flex;
			align-items: center;
			font-size: 30upx;

			.left {
				width: 70%;
			}

			.right {
				display: block;
				flex: 1;
				text-align: center;
				font-size: 30upx;
				color: grey;
				position: relative;

				view {
					height: 60%;
					border-left: 2upx solid grey;
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					margin: auto;
				}
			}
		}

		.btnBox {
			width: 100%;
			margin: 30upx 0 0;
			display: flex;

			.btn {
				width: 90%;
				border: none;
				background: rgb(39, 209, 213);
				color: white;
				margin: 0 auto;
			}
		}
	}
</style>
